<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>实时监测大屏</title>
    <meta name="viewport" content="initial-scale=1, maximum-scale=1">
    <link rel="shortcut icon" href="favicon.ico">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">

    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">

    <!--全局css-->
    <link rel="stylesheet" href="../../../style.css">
    <style>
        .slider {
            width: 35px;
            height: 35px;
            cursor: pointer;
            position: absolute;
        }
        .img{
            width: 35px;
            height: 35px;
        }
        .devSpan{
            top: 40px;
            position: relative;
            white-space: nowrap;
            color: blue;
        }
        .panel {
            padding: 10px;
            border: solid 1px #D8D8D8;
            background: #fff;
            margin-bottom: 20px;
        }

        .panel .panel-title {
            border-bottom: solid 1px #D8D8D8;
            padding-bottom: 5px;
            margin-bottom: 10px;
        }

        .panel-f {
            text-align: center;
            color: #485465;
            width: 83%;
            background: #BDD0DD;
            border-radius: 5px;
            border: 0px;
            height: 60px;
            margin-top: 20px;
            padding-top: 5px;
        }

        .panel-f p {
            margin-bottom: 0px;
            white-space: nowrap;
        }

        .panel-f h5 {
            font-weight: 700;
            margin-top: 10px;
        }

        .panel-f:last-child {
            margin-right: -5px;
        }

        .deviceInfo {
            height: 300px;
        }

        .attr {
            margin: 0px;
            padding: 0px;
            /* float: left; */
            border: solid 2px #9699A4;
            width: 70%;
            background: #f5f5f5;
            border-radius: 10px;
            overflow: hidden;
            padding: 10px;
            margin: 20px;
            font-size: 15px;
            line-height: 40px;
        }

        li {
            list-style-type: none;
        }
        .box-active{
            box-shadow: inset 0 0 30px 5px #fe7b4b
        }
    </style>

</head>
<body>

<div class="page" id="page-vue">
    <el-row justify="space-between">
        <el-col :span="19">
            <el-row  type="flex" >
                <el-col :span="8" v-for="(item,index) in  proData">
                    <p  style="font-size:13px">{{item.projectName}}</p>
                    <div class="panel panel-f">
                        <el-row type="flex">
                            <image src="../../../imgs/project.png" style="width: 50%; height: 60px;margin-top: 5px;"></image>
                            <div>
                                <p>设备总数:　{{item.devicecount}}</p>
                                <p>在线设备:　{{item.onlinecount}}</p>
                            </div>
                        </el-row>
                    </div>
                </el-col>
            </el-row>
        </el-col>
        <!--<el-col :span="24">-->
            <!--<el-table :data="items.filter(data => !search || data.DevName.toLowerCase().includes(search.toLowerCase()))" height="250" size="mini" style="width: 100%">-->
                <!--<el-table-column type="index" label="序号" width="50" align="center"></el-table-column>-->
                <!--<el-table-column prop="ProjectName" label="项目名称"  align="center"></el-table-column>-->
                <!--<el-table-column prop="DevName" label="设备名称"  align="center"></el-table-column>-->
                <!--<el-table-column prop="DevAddr" label="设备地址"  align="center"></el-table-column>-->
                <!--<el-table-column prop="manager" label="联系人"  align="center"></el-table-column>-->
                <!--<el-table-column prop="phone" label="电话"  align="center"></el-table-column>-->
                <!--<el-table-column prop="ErrorName" label="告警名称"  align="center"></el-table-column>-->
                <!--<el-table-column prop="errorType_Text" label="告警类型"  align="center"></el-table-column>-->
                <!--<el-table-column prop="errorGrade" label="告警级别"  align="center"></el-table-column>-->
                <!--<el-table-column prop="LogTime" label="发生时间" width="150"  align="center"></el-table-column>-->
                <!--<el-table-column prop="ProcessFlag_Text" label="当前状态">-->
                    <!--<template slot-scope="scope">-->
                        <!--<span class="level">{{scope.row.ProcessFlag_Text}}</span>-->
                    <!--</template>-->
                <!--</el-table-column>-->
                <!--<el-table-column  width="200px" fixed="right" align="center">-->
                    <!--<template slot="header" slot-scope="scope">-->
                        <!--<el-input-->
                                <!--v-model="search"-->
                                <!--size="mini"-->
                                <!--placeholder="输入设备名称搜索"/>-->
                    <!--</template>-->
                    <!--<template slot-scope="scope">-->


                    <!--</template>-->
                <!--</el-table-column>-->
            <!--</el-table>-->
        <!--</el-col>-->
        <el-col :span="4" >

        </el-col>
        <el-col :span="1"></el-col>
    </el-row>

    <!--<div class="page-footer">-->
        <!--<el-pagination background layout="prev, pager, next" :pagesize="pageSize" :total="totalCount"-->
                       <!--:current-page.sync="currentPage" @current-change="onChangePage">-->
        <!--</el-pagination>-->
    <!--</div>-->
    <el-dialog title="报警派单" :visible.sync="editAlarmVisible" width="600" :before-close="devClose" >
        <el-card>
            <el-form :inline="true" label-width="100px">
                <el-form-item label="接收人(*)">
                    <el-select v-model="dptchForm.toUserId">
                        <el-option v-for="item in childUsers" :value="item.Id" :label="item.userName"></el-option>
                    </el-select>
                </el-form-item>
                <el-col :span="24">
                    <el-form-item label="报警详情(*)">
                        <el-input type="textarea" style="width:350px;" v-model="dptchForm.alarmMsg"></el-input>
                    </el-form-item>
                </el-col>
                <el-form-item>
                    <el-button type="primary" size="mini" round style="margin-left: 100px;" @click="onSaveDptch">保存
                    </el-button>
                </el-form-item>
            </el-form>
        </el-card>
    </el-dialog>
    <el-dialog title="设备实时检测" :visible.sync="deviceVisible" :before-close="devClose"   width="80%" :close-on-click-modal="false">
        <el-row>
            <el-col :span="8">
                <div class="deviceInfo">
                    <ul class="attr">
                        <li>设备名称:　　{{device.DeviceName}}</li>
                        <li>设备编号:　　{{device.DeviceID}}</li>
                        <li>所属区域:　　{{device.zoneName}}</li>
                        <li>所属部门:　　{{device.DepartmentName}}</li>
                        <li>设备状态:　　<span v-if="device.online==1">在线</span><span v-else-if="device.online==0">离线</span></li>
                        <li>最近时间:　　{{device.updateTime}}</li>
                    </ul>
                </div>
            </el-col>
            <el-col :span="16">
                <el-row style="flex-wrap: nowrap">
                    <el-col :span="4" v-for="(item,index) in  paramData">
                        <div class="panel panel-f" >
                            <p>{{item.dp_name}}</p>
                            <h5>{{item.dp_value}}{{item.dp_unitid}}</h5>
                        </div>
                    </el-col>
                </el-row>
            </el-col>
            <el-col :span="24">
                <p style="text-align: center;border-bottom:#eee solid 1px">场景图</p>
                <div id="box" style="margin: auto">

                </div>
            </el-col>
        </el-row>

    </el-dialog>
</div>

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>

<script type='text/javascript' src='../../../assets/jquery-1.11.2.min.js' charset='utf-8'></script>
<script type='text/javascript' src='../../../assets/echarts.min.js' charset='utf-8'></script>
<script type='text/javascript' src='../../../js/common.js' charset='utf-8'></script>
<script type='text/javascript' src='../../../js/component.js' charset='utf-8'></script>

<script>

    let vuePageIndex = new Vue({
        el: '#page-vue',
        data: {
            items: [],
            currentPage: 1,
            totalCount: 50,
            pageSize: 10,
            timer: null,
            editAlarmVisible: false,
            deviceVisible:false,
            childUsers: [],
            dptchForm: {
                alarmId: '',
                alarmName: '',
                alarmMsg: '',
                toUserId: ''
            },
            search:'',
            chartERatioData:{},
            chartDeviceData:{},
            device:'',
            paramData:'',
            imgArry:{
                'Electric':'../../../imgs/electric.png',
                'Water':'../../../imgs/water.png'
            },
            proData:[],
        },
        methods: {
            onChangePage(page) {
                this.currentPage = page;
            },

            getDeviceData(params){
                HttpUtil.get('device/getById',params).success((res)=>{
                    this.device = res.data;
                    HttpUtil.get('device/Monitor',params).success((res)=>{
                        this.paramData = res.data;
                    })
                })
            },
            startTimer: function () {
                this.loadDatas();
                this.timer = setInterval(() => {
                    this.loadDatas();
                }, 30000)
            },
            clearTime: function () {
                clearInterval(this.timer);
                this.timer=null;
            },
            dispatch: function (row) {
                this.dptchForm.alarmId = row.Id;
                this.dptchForm.alarmName = row.ErrorName;
                this.dptchForm.alarmMsg = row.ErrorName;
                this.editAlarmVisible = true;
                this.clearTime();
            },
            detail:function(row){
                   this.clearTime();
                   this.getDeviceData({deviceId:row.DeviceNo});
                   this.setBoxImg(row);
            },
            devClose:function(done){
                this.startTimer();
                done();
            },
            onSaveDptch: function () {
                var _self = this;
                var param = {
                    wf_operation: "手工开单",
                    wf_businesstype: 5,
                    wf_eventName: this.dptchForm.alarmName,
                    wf_eventMsg: this.dptchForm.alarmMsg,
                    wf_objType: 5,
                    wf_objid: this.dptchForm.alarmId,
                    wf_to: this.dptchForm.toUserId,  //接收人Id
                    wf_seqno: 0
                };
                HttpUtil.get('WorkFlow/Add', param).success(function (data) {
                    if (data.state == 0) {
                        _self.$message({
                            message: '派单成功！',
                            type: 'success'
                        });

                        for (var i = 0; i < _self.items.length; i++) {
                            if (_self.items[i].Id == _self.dptchForm.alarmId) {
                                _self.items[i].ProcessFlag = 1;
                                _self.items[i].ProcessFlag_Text = '已派单';
                                break;
                            }
                        }

                        _self.editAlarmVisible = false;
                        _self.startTimer();

                    } else {
                        _self.$message({
                            message: '派单失败！',
                            type: 'error'
                        });
                    }
                });
            },
            setBoxImg:function (row) {
                this.deviceVisible = true;
                $('#box').empty();
                HttpUtil.get('ScadaScene/ByDeviceIDList',{DeviceID:row.DeviceNo}).success((res)=>{
                    if(res.data.length==0){
                        $('#box').html('暂未配置场景图！');
                        return;
                    }
                    $("#box").css("background-image", "url('')");
                    // 根据索引 设置 不同场景的 不同背景图
                    if (res.data[0].ImageName != null) {
                        let img = new Image();
                        img.src = 'http://iot.hzcando.com:10004' + res.data[0].ImageName;
                        if (img.complete) {
                            let style = {
                                position: "relative",
                                width: img.width +"px",
                                height: img.height +"px",
                                top: "10px",
                                left: "10px",
                            }
                            for (let key in style) {
                                document.getElementById('box').style[key] = style[key];
                            }
                            $("#box").css("background-image", "url(" + img.src + ")");
                        } else {
                            img.onload = function () {
                                let style = {
                                    position: "relative",
                                    width: img.width +"px",
                                    height: img.height +"px",
                                    top: "10px",
                                    left: "10px",
                                }
                                for (let key in style) {
                                    document.getElementById('box').style[key] = style[key];
                                }
                                $("#box").css("background-image", "url(" + img.src + ")");
                                img.onload = null;//避免重复加载
                            }
                        }
                        $('#box').append('<div id= ' + row.DeviceNo + '  class="slider"><span class="devSpan">'+row.DevName+'</span></div>');
                        let style = {
                            left:res.data[0].Left1+ 'px',
                            top:res.data[0].Top+ 'px',
                            background:"url("+this.imgArry[row.DevType]+")"
                        }
                        for (let k in style) {
                            document.getElementById(row.DeviceNo).style[k] = style[k];
                        }

                    }


                })
            }
        },
        created: function () {
            HttpUtil.get('User/Child').success((data)=> {
                this.childUsers = data.data;
            });
            HttpUtil.get('Project/List',{pagesize: 200}).success((res)=>{
                  this.proData =res.data;
            })

        },
        mounted: function () {
            this.startTimer();
        }
    });


</script>

</body>
</html>
